<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('列表')" />
</head>
<style>
	.searchStyle{
		margin-left: 10%;
		width: 80%;
		background: #fff;
		border-radius: 6px;
		margin-top: 10px;
		padding-top: 5px;
		padding-bottom: 13px;
		box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	}
</style>
<body class="gray-bg">
    
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 searchStyle">
				<span style="font-size: 32px">下单测试</span>
				<form id="orderPay">
					<div class="select-list">
						<ul>
							<li>
								选择商户：<select name="merchantIdPay" class="merchantId" id="merchantIdPay"></select>
							</li>
							<li>
								支付类型：
								<select type="text" name="service" id="service">
									<option value="wxqr">微信扫码</option>
									<option value="wxwap">微信wap|H5</option>
									<option value="aliqr">支付宝扫码</option>
									<option value="aliwap">支付宝wap|H5</option>
									<option value="kj">银联快捷</option>
									<option value="ylqr">银联扫码</option>
									<option value="wy">网银网关</option>
								</select>
							</li>
							<li>
								金额(元)：<input type="text" id="accountBalanc" name="accountBalanc"/>
							</li>
							<li>
								<a class="btn btn-primary" onclick="orderPay()">
									<i class="fa fa-link"></i> 提交测试
								</a>
							</li>
						</ul>
					</div>
				</form>
			</div>


			<div class="col-sm-12 searchStyle">
				<span style="font-size: 32px">查询订单</span>
				<form id="orderPayCheck">
					<div class="select-list">
						<ul>
							<li>
								选择商户：<select name="merchantIdCheck" id="merchantIdCheck" class="merchantId"></select>
							</li>

							<li>
								订单号：<input type="text" id="orderChenck" name="orderChenck" placeholder=" 201905271131120001" />
							</li>
							<li>
								<a class="btn btn-primary" onclick="orderPayCheck()">
									<i class="fa fa-link"></i> 查询订单
								</a>
							</li>
						</ul>
					</div>
				</form>
			</div>



			<div class="col-sm-8 searchStyle">
				<span style="font-size: 32px">代付测试</span>
				<form class="form-horizontal m" id="withDrawalTest">
					<div class="form-group">
						<label class="col-sm-3 control-label">选择商户：</label>
						<div class="col-sm-8">
							<select class="form-control" id="merchantId" name="merchantId">
								<option value="" selected>----请选择----</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">商户钱包：</label>
						<div class="col-sm-8">
							<select class="form-control" id="walletKindId" name="walletKindId">
								<option value="" selected>----请选择----</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">商户钱包信息：</label>
						<div class="col-sm-8">
							<input id="merchantWalletInfo" name="merchantWalletInfo" class="form-control" type="text" readonly>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">代付金额(元)：</label>
						<div class="col-sm-8">
							<input id="accountBalance" name="accountBalance" class="form-control" type="text" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">商户收款银行：</label>
						<div class="col-sm-8">
							<select class="form-control" id="merchantBank" name="merchantBank">
								<option value="" selected>----请选择----</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">银行类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="bankId" name="bankId" required>
								<option value="" selected>----请选择----</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">分行：</label>
						<div class="col-sm-8">
							<input id="bankBranch" name="bankBranch" class="form-control" type="text" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">支行：</label>
						<div class="col-sm-8">
							<input id="bankSubBranch" name="bankSubBranch" class="form-control" type="text" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">所在省：</label>
						<div class="col-sm-8">
							<select class="form-control" id="bankProvince" name="bankProvince" required>
								<option value="" selected>----请选择----</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">所在市：</label>
						<div class="col-sm-8">
							<select class="form-control" id="bankCity" name="bankCity" required>
								<option value="" selected>----请选择----</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">联行号：</label>
						<div class="col-sm-8">
							<input id="bankUnionNo" name="bankUnionNo" class="form-control" type="text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">持卡人：</label>
						<div class="col-sm-8">
							<input id="bankAccountOwner" name="bankAccountOwner" class="form-control" type="text" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">卡号：</label>
						<div class="col-sm-8">
							<input id="bankAccountNo" name="bankAccountNo" class="form-control" type="text" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">账户类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="bankAccountType" name="bankAccountType" required>
								<option value=0>对私</option>
								<option value=1>对公</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">提款密码：</label>
						<div class="col-sm-8">
							<input id="withdrawalPassword" name="withdrawalPassword" class="form-control" type="text" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">谷歌机器验证码：</label>
						<div class="col-sm-8">
							<input id="googleCode" name="googleCode" class="form-control" type="text" required>
						</div>
					</div>
				</form>
				<div class="form-group" style="margin-left: 45%">
					<a class="btn btn-primary" onclick="withDrawalPay()">
						<i class="fa fa-link"></i> 提交测试
					</a>
				</div>
			</div>



			<div class="col-sm-12 searchStyle">
				<span style="font-size: 32px">查询代付订单</span>
				<form id="withDrawalCheck">
					<div class="select-list">
						<ul>
							<li>
								选择商户：<select name="merchantIdOrderCheck" id="merchantIdOrderCheck" class="merchantId"></select>
							</li>

							<li>
								订单号：<input type="text" id="orderChenckWithdrawal" name="orderChenckWithdrawal" placeholder=" 201905271131120002"/>
							</li>
							<li>
								<a class="btn btn-primary" onclick="checkwithdrawal()">
									<i class="fa fa-link"></i> 查询订单
								</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var role = [[${role}]];
        var userId = [[${userId}]];


        /*校验规则*/
        $.validator.addMethod("regex",function (value, element, params) {
            var exp = new RegExp(params);
            return exp.test(value);
        },"请输入数字(可保留两位小数)");
        $.validator.addMethod("number",function (value, element, params) {
            var exp_email = new RegExp(params);
            return exp_email.test(value);
        },"请输入数字");
        /*下单测试===============表单校验*/
        $("#orderPay").validate({
            rules:{
                accountBalanc:{
                    regex:"^[0-9]+(.[0-9]{2}|.[0-9]{1})?$"
                }
            },
            messages: {
            },
            focusCleanup: true
        });
        /*查询订单==============表单校验*/
        $("#orderPayCheck").validate({
            rules:{
                orderChenck:{
                    number:"^[0-9]*[1-9][0-9]*$"
                }
            },
            messages: {
            },
            focusCleanup: true
        });
        /*代付测试===============表单校验*/
        $("#withDrawalTest").validate({
            rules:{
                accountBalance:{
                    regex:"^[0-9]+(.[0-9]{2}|.[0-9]{1})?$"
                }
            },
            messages: {
            },
            focusCleanup: true
        });
        /*查询代付订单==============表单校验*/
        $("#withDrawalCheck").validate({
            rules:{
                orderChenckWithdrawal:{
                    number:"^[0-9]*[1-9][0-9]*$"
                }
            },
            messages: {
            },
            focusCleanup: true
        });

        /*=============管理侧===================选择商户下拉框 */
		if (role == 1) {
            $.post(ctx + "payApi/test/merchantList", {'status':'0'},function (response) {
                var data = response.rows;
                var option = "";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
                }
                $(".merchantId").html(option);
            });
		}
        /*=============商户侧===================选择商户下拉框 */
        if (role == 6) {
            $.post(ctx + "payApi/test/merchantList", {'userId':userId},function (response) {
                var data = response.rows;
                var option = "";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
                }
                $(".merchantId").html(option);
            });
        }


		var $withDrawalTestFrom = $("#withDrawalTest");
        var $province = $withDrawalTestFrom.find("select[name='bankProvince']");
        var $city = $withDrawalTestFrom.find("select[name='bankCity']");
        /*代付测试-------管理侧-------选择商户下拉框 */
        if (role == 1) {
            $.post(ctx + "payApi/test/merchantList", {'status':'0'},function (response) {
                var data = response.rows;
                var option = "";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
                }
                $withDrawalTestFrom.find("select[name='merchantId']").html("").append(option);
                // 初始化商户钱包下拉框
                var merchantId = data[0].id;
                initMerchantWalletKindId(merchantId);
                // 初始化商户收款银行下拉框
                initMerchantBank(merchantId);
            });
		}
		/*====================商户侧==================选择商户下拉框 */
        if (role == 6) {
            $.post(ctx + "payApi/test/merchantList", {'userId':userId},function (response) {
                var data = response.rows;
                var option = "";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
                }
                $withDrawalTestFrom.find("select[name='merchantId']").html("").append(option);
                // 初始化商户钱包下拉框
                var merchantId = data[0].id;
                initMerchantWalletKindId(merchantId);
                // 初始化商户收款银行下拉框
                initMerchantBank(merchantId);
            });
		}
        /* 商户钱包下拉框选择事件   更新商户钱包下拉框 */
        $withDrawalTestFrom.find("select[name='merchantId']").change(function () {
            var merchantId = $withDrawalTestFrom.find("select[name='merchantId']").val();
            // 更新商户钱包信息
            initMerchantWalletKindId(merchantId);
            // 更新银行下拉框信息
            initMerchantBank(merchantId);
        });

        /* 商户钱包下拉框 */
        function initMerchantWalletKindId(merchantId) {
            $.post(ctx + "payApi/test/merchantWalletList", {'merchantId':merchantId},function (response) {
                if (response.code == 0) {
                    var data = response.rows;
                    var option = "";
                    for (var i = 0; i < data.length; i++) {
                        option += "<option value='"+ data[i].walletKindId +"'>" +data[i].walletKindName + "</option>"
                    }
                    $withDrawalTestFrom.find("select[name='walletKindId']").html("").append(option);
                    // 初始化商户钱包信息
                    if (typeof(data[0])=="undefined") {
                        merhcantWalletInfo(merchantId, -1);
                        option = "<option value=''>" + "选中的商户没有钱包" + "</option>"
                        $withDrawalTestFrom.find("select[name='walletKindId']").html("").append(option);
                    }else {
                        merhcantWalletInfo(merchantId, data[0].walletKindId);
                    }
                } else {
                    $.modal.alertError("初始化信息异常");
                }
            });
        }
        /* 商户钱包下拉框选择事件   更新商户钱包信息 */
        $withDrawalTestFrom.find("select[name='walletKindId']").change(function () {
            var merchantId = $withDrawalTestFrom.find("select[name='merchantId']").val();
            var walletKindId = $withDrawalTestFrom.find("select[name='walletKindId']").val();
            // 更新商户钱包信息
            merhcantWalletInfo(merchantId,walletKindId);
        });




        /* 商户钱包信息 */
        function merhcantWalletInfo(merchantId, walletKindId) {
            if (walletKindId != -1) {
                $.post(ctx + "payApi/test/merchantWalletList", {'merchantId':merchantId,'walletKindId':walletKindId},function (response) {
                    if (response.code == 0) {
                        var data = response.rows;
                        var accountBalance = new Decimal(data[0].accountBalance).div(new Decimal(100));
                        var frozenBalance = new Decimal(data[0].frozenBalance).div(new Decimal(100));
                        var unliquidatedBalanceOne = new Decimal(data[0].unliquidatedBalanceOne).div(new Decimal(100));
                        var unliquidatedBalanceTwo = new Decimal(data[0].unliquidatedBalanceTwo).div(new Decimal(100));

                        // balanceOne = 总金额 - 冻结金额
                        var balanceOne = new Decimal(accountBalance).sub(new Decimal(frozenBalance));
                        // 可用余额 = balanceOne - 未结算金额
                        var unliquidatedBalance = new Decimal(unliquidatedBalanceOne).add(new Decimal(unliquidatedBalanceTwo));
                        var usableBalance = new Decimal(balanceOne).sub(new Decimal(unliquidatedBalance));
                        var message = "可用余额：" + usableBalance+"元" + "    冻结金额：" + frozenBalance +"元" + "    未结算金额：" + unliquidatedBalance + "元";
                        $withDrawalTestFrom.find("input[name='merchantWalletInfo']").val(message);
                    }
                });
            }else {
                var message = "可用余额：" + usableBalance+"元" + "    冻结金额：" + frozenBalance +"元" + "    未结算金额：" + unliquidatedBalance + "元";
                $withDrawalTestFrom.find("input[name='merchantWalletInfo']").val(message);
            }
        }



        /* 商户收款银行下拉框 */
        function initMerchantBank(merhcantId) {
            $.post(ctx + "merchant/merchantBank/list", {'merchantId':merhcantId},function (response) {
                if (response.code == 0) {
                    var data = response.rows;
                    var option = "<option value=''>" + "--------" + "</option>";
                    for (var i = 0; i < data.length; i++) {
                        option += "<option value='"+ data[i].id +"'>" + data[i].bankName + "┃持卡人:" + data[i].bankAccountOwner +
                            "┃卡号:" + data[i].bankAccountNo + "┃" + data[i].bankProvince + " " + data[i].bankCity +"</option>"
                    }
                    $withDrawalTestFrom.find("select[name='merchantBank']").html("").append(option);
                }
            });
        }
        /* 商户收款银行下拉框选择事件   更新银行等信息 */
        $withDrawalTestFrom.find("select[name='merchantBank']").change(function () {
            var id = $withDrawalTestFrom.find("select[name='merchantBank']").val();
            if (id) {
                $.post(ctx + "merchant/merchantBank/list",{'id':id},function (response) {
                    if (response.code == 0) {
                        var data = response.rows;
                        var merchantBank = data[0];
                        // 银行类型  不可选
                        $withDrawalTestFrom.find("select[name='bankId']").val(merchantBank.bankId).prop('selected',true);
                        $withDrawalTestFrom.find("select[name='bankId']").val(merchantBank.bankId).prop('disabled',true);
                        // 分行     不可填
                        $withDrawalTestFrom.find("input[name='bankBranch']").val(merchantBank.bankBranch);
                        $withDrawalTestFrom.find("input[name='bankBranch']").attr('disabled', true);
                        // 支行 		不可填
                        $withDrawalTestFrom.find("input[name='bankSubBranch']").val(merchantBank.bankSubBranch);
                        $withDrawalTestFrom.find("input[name='bankSubBranch']").attr('disabled', true);
                        // 所在省   不可选
                        $withDrawalTestFrom.find("select[name='bankProvince']").val(merchantBank.bankProvince).prop('selected',true);
                        $withDrawalTestFrom.find("select[name='bankProvince']").val(merchantBank.bankProvince).prop('disabled',true);
                        // 所在市   不可选
                        getCityOrCounty(2, merchantBank.bankProvince, $city, merchantBank.bankCity);
                        $withDrawalTestFrom.find("select[name='bankCity']").val(merchantBank.bankCity).prop('disabled',true);
                        // 联行号   不可填
                        $withDrawalTestFrom.find("input[name='bankUnionNo']").val(merchantBank.bankUnionNo);
                        $withDrawalTestFrom.find("input[name='bankUnionNo']").attr('disabled', true);
                        // 持卡人   不可填
                        $withDrawalTestFrom.find("input[name='bankAccountOwner']").val(merchantBank.bankAccountOwner);
                        $withDrawalTestFrom.find("input[name='bankAccountOwner']").attr('disabled', true);
                        // 卡号     不可填
                        $withDrawalTestFrom.find("input[name='bankAccountNo']").val(merchantBank.bankAccountNo);
                        $withDrawalTestFrom.find("input[name='bankAccountNo']").attr('disabled', true);
                        // 账户类型	不可填
                        $withDrawalTestFrom.find("select[name='bankAccountType']").val(merchantBank.bankAccountType).prop('selected',true);
                        $withDrawalTestFrom.find("select[name='bankAccountType']").attr('disabled', true);
                    }
                });
            }else {
                /*去掉不可选不可填属性*/
                removeCss();
                getCityOrCounty(2, $province.val(), $city, $city.val());
            }

        });





        /*初始化省市县*/
        /*初始化-省*/
        $.post(ctx + "basedata/areas/list",{'levelType':1,'parentId':100000},function (response) {
            var data = response.rows;
            var option = "<option value=''>" + "请选择" + "</option>";
            for (var i = 0; i < data.length; i++){
                option += "<option value='" + data[i].province + "'>" + data[i].province + "</option>"
            }
            $province.html("").append(option);
        });
        /*省下拉框-选择事件*/
        var str="<option value=''>" + "请选择" + "</option>";
        $province.change(function () {
            $city.html(str);
            if ($province.val())
                getCityOrCounty(2, $province.val(), $city, $city.val());
        });

        /*根据省查询市*/
        function getCityOrCounty(LevelType,province,htm,address) {
            $.post(ctx + "basedata/areas/parentId", {'levelType':LevelType,'province':province}, function (response) {
                var data = response.rows;
                var option = "<option value=''>" +"请选择"+ "</option>";
                for (var i = 0; i < data.length; i++) {
                    if (data[i].city == address) {
                        option += "<option value='" + data[i].city + "' selected='selected'>" + data[i].city + "</option>"
                    }else {
                        option += "<option value='" + data[i].city + "'>" + data[i].city + "</option>"
                    }
                }
                htm.html("").append(option);
            });
        }


        /*银行类型下拉框*/
        $.post(ctx + "payApi/test/bankList", {'name':''},function (response) {
            var data = response.rows;
            var option = "<option value=''>" + "请选择" + "</option>";
            for (var i = 0; i < data.length; i++) {
                option += "<option value='"+ data[i].id +"'>" + data[i].name + "</option>"
            }
            $withDrawalTestFrom.find("select[name='bankId']").html("").append(option);
        });



        /*去掉不可选不可填属性*/
        function removeCss() {
            // 银行可选
            $withDrawalTestFrom.find("select[name='bankId']").prop('disabled',false);
            // 分行可填
            $withDrawalTestFrom.find("input[name='bankBranch']").prop('disabled', false);
            // 支行可填
            $withDrawalTestFrom.find("input[name='bankSubBranch']").prop('disabled', false);
            // 所在省可选
            $withDrawalTestFrom.find("select[name='bankProvince']").prop('disabled',false);
            getCityOrCounty(2, $province.val(), $city, $city.val());
            // 所在市可选
            $withDrawalTestFrom.find("select[name='bankCity']").prop('disabled',false);
            // 联行号可填
            $withDrawalTestFrom.find("input[name='bankUnionNo']").prop('disabled', false);
            // 持卡人可填
            $withDrawalTestFrom.find("input[name='bankAccountOwner']").prop('disabled', false);
            // 卡号可填
            $withDrawalTestFrom.find("input[name='bankAccountNo']").prop('disabled', false);
            // 账户类型可选
            $withDrawalTestFrom.find("select[name='bankAccountType']").prop('disabled', false);

        }

        
        
        
        /*===========================================下单测试===========================================*/
        function orderPay() {
            var validate = $("#orderPay").validate();
            var flag = validate.form();
            if (flag) {
                // 商户
                var merchantId = $("#orderPay").find("select[name='merchantIdPay']").val();
                // 支付类型
                var service = $("#orderPay").find("select[name='service']").val();
                // 金额
                var accountBalanc = $("#orderPay").find("input[name='accountBalanc']").val();
                //
                var url = ctx + "payApi/test/orderPay/?merchantId=" + merchantId + "&service=" + service +"&accountBalanc=" + accountBalanc;
                $.modal.openTab("下单测试-返回结果", url);
			}
        }


        /*==============================================订单查询============================================*/
		function orderPayCheck() {
            var validate = $("#orderPayCheck").validate();
            var flag = validate.form();
            if (flag) {
                // 商户
                var merchantId = $("#orderPayCheck").find("select[name='merchantIdCheck']").val();
                // 订单号
                var orderNumber = $("#orderPayCheck").find("input[name='orderChenck']").val();
                //
                var url = ctx + "payApi/test/orderPayCheck/?merchantId=" + merchantId +"&orderNumber=" + orderNumber;
                $.modal.openTab("订单查询-返回结果", url);
            }
        }


        /*==============================================代付测试============================================*/
		function withDrawalPay() {
            var validate = $withDrawalTestFrom.validate();
            var flag = validate.form();
            if (flag) {
                removeCss();
                var data = $withDrawalTestFrom.serializeArray();
                var walletKindId = $("#form-merhcantWallet-withdrawal").find("select[name='walletKindId']").val();
                if (walletKindId == "") {
                    $.modal.alertError("选中的商户没有钱包！");
                    return;
                }
                // 发送请求
				var url = ctx + "payApi/test/withDrawalPay?" + $withDrawalTestFrom.serialize();
                $.modal.openTab("代付测试-返回结果", url);
			}
        }


        /*==============================================代付测试============================================*/
		function checkwithdrawal() {
            var validate = $("#withDrawalCheck").validate();
            var flag = validate.form();
            if (flag) {
                // 商户
                var merchantId = $("#withDrawalCheck").find("select[name='merchantIdOrderCheck']").val();
                // 订单号
                var orderNumber = $("#withDrawalCheck").find("input[name='orderChenckWithdrawal']").val();
                //
                var url = ctx + "payApi/test/withdrawalOrderCheck/?merchantId=" + merchantId +"&orderNumber=" + orderNumber;
                $.modal.openTab("代付订单查询-返回结果", url);
			}
        }
	</script>
</body>
</html>